<template>
	<div class="detail">
		<!-- detail banner -->		
		<detail-banner 
			v-bind:sight-name="sightName"
	      	v-bind:banner-img="bannerImg"
	      	v-bind:gallary-imgs="gallaryImgs"
		/>
        <!-- 回退箭头 这种h5页面老师这种没有统一的页头，一般移动端框架会提供这个功能 -->
		<detail-head></detail-head>
        <!-- 三级联动数据 组件的递归调用 -->        
		<div class="content">
			<detail-list :list="list"></detail-list>
		</div>
	</div>
</template>

<script type="text/javascript">
    import axios from 'axios'
    import DetailBanner from './detail/Banner'
    import DetailHead from './detail/Head'
    import DetailList from './detail/List'
    import { mapGetters } from 'vuex'
    
    export default{
        name:"detail",
        data(){
            return {
                msg:"detail",
                lastId:"",
                sightName: '',
                bannerImg: '',           //banner横幅图片
                gallaryImgs: [],         //全屏轮播图片数组
                list: []
            }
        },
        components:{
            DetailBanner,
            DetailHead,
            DetailList
        },
        mounted(){		          
            this.lastId=this.$route.params.id;
            this.getDetailInfo();
        },
        activated(){
            if(this.$route.params.id==this.lastId){
                //console.log("使用上一次缓存数据");
            }else{
                this.lastId=this.$route.params.id;
                this.getDetailInfo();
            }
        },
        methods:{
            getDetailInfo(){
                axios.get(this.env.server8092+"travel/detail",{
                    cityId:this.lastId
                }).then((response)=>{
                    let res = response.data 
                    if (res.ret && res.data) {
                        const data = res.data
                        this.sightName = data.sightName                        
                        //这里纯粹是为了演示，实际业务这个值要根据detail查询出来设置
                        this.bannerImg = data.bannerImgs[parseInt(Math.random()*10) % 4];
                        this.gallaryImgs = data.gallaryImgs
                        this.list = data.categoryList
                    }
                });
            }
        },
        computed:{
            ...mapGetters(['env','city'])	     
        }
    }	
    /**
     *	1> 钩子函数的处理上有点小复杂，首先，当组件第一次挂载适合，mounted和activated都会被执行，但是activated有很大的不同，他是在你使用了keep-alive包裹
    *		了组件以后才有的，第二点他是在mounted之后执行，因此第一次执行时过程入戏：
    *		mounted钩子执行，在其内部为lastId赋当前路由参数值，然后发送异步请求。
    *			activated也会被执行内部判断lastId与路由参数id,由于mounted刚刚赋值完毕，结果为true,这就不需要重复执行请求啦。
    *		当再次回到detail时候，网友说“再浪回来的时候”,mounted已经不执行啦，lastId缓存的是上一次的值。
    *			activated总是被执行，内部业务相同还是比较当前路由参数id与lastId，如果相同，说法用户访问当前页面点击查看的还是上一次那个详情选项。
    *			也就不需要刷新状态数据，比如上一次看的是故宫，这次用户还是看故宫。
    *			如果上一次看的是故宫，这次看天安门，参数id是天安门的，故宫上上一次的状态id,已经不一样啦，所以要重新请求数据，刷新数据，并且重新复制lastid.	
    *
    */
</script>
<style lang="stylus" scoped>
    .content
        min-height:50rem;	
</style>